<!DOCTYPE html>
<html>

<head>
    <title>呱奇博士-学员端</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=0.7, user-scalable=no, shrink-to-fit=no">
    <link rel="stylesheet" href="./css/bootstrap-material-design.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/room.css">
</head>

<body>
    <div id="root">
        <!-- 登录页面 -->
        <div id="login-root">
            <div class="grade_info" >
                <div  class="chose_grade">选择上课班级:<img class="close_grade" src="img/close.png"></div>
                <div class="grade_data">

                </div>
            </div>
            <!-- 登录卡片 -->
            <div id="login-card" class="card">
                <!-- 顶部三个蓝条 -->
                <div class="row-div" style=" width: 100%; height: 10px">
                    <div style="width: 190px; height: 100%; background-color: #006EFF"></div>
                    <div style="width: 160px; height: 100%; background-color: #00A4FF"></div>
                    <div style="width: 100px; height: 100%; background-color: #5AD5E0"></div>
                </div>
                <!-- 腾讯云logo -->
                <div class="row-div" style="width: 100%; height: 100px; justify-content: center">
                    <img style="height: 230px; margin-left: -45px;" src="./img/logo.png" alt="">
                </div>
                <!-- 用户名 房间号 登录按钮-->
                <div class="col-div" style="width: 320px">
                    <div class="form-group bmd-form-group is-filled" style="width: 100%; height: 80px">
                        <label for="userId" class="bmd-label-floating">用户名:</label>
                        <input type="text" class="form-control" name="userId" id="userId" maxlength="18">
                    </div>
                    <div class="form-group bmd-form-group is-filled" style="width: 100%; height: 80px">
                        <label for="v_code" class="bmd-label-floating">验证码:</label>
                        <input type="text" class="form-control" name="v_code" id="v_code" maxlength="18">
                        <div class="button_l" id="vcode"  rel="https://api.guaqi.vip/rtc/index.php/WebLiveAction/sendStuCode" enabled="true">获取密码</div>
                    </div>

                    <div style="height: 24px"></div>
                    <!-- 登录 -->
                    <button id="login-btn" type="button" class="btn btn-raised btn-primary"
                        style="width: 100%; height: 40px">进入房间
                        <div class="ripple-container"></div>
                    </button>
                    <!-- 摄像头 麦克风 -->
                    <!--<div class="row-div" style="width: 100%; height: 105px; justify-content: center">
                        <img id="camera" style="height: 27px" src="./img/camera.png" onClick="event.cancelBubble = true"
                            data-toggle="popover" data-placement="top" title="" data-content="">
                        &lt;!&ndash; 选择摄像头 &ndash;&gt;
                        <div id="camera-option" style="display: none"></div>
                        <div style="width: 100px"></div>
                        <img id="microphone" style="height: 27px" src="./img/mic.png"
                            onClick="event.cancelBubble = true" data-toggle="popover" data-placement="top" title=""
                            data-content="">
                        &lt;!&ndash; 选择麦克风 &ndash;&gt;
                        <div id="mic-option" style="display: none"></div>
                    </div>-->
                    <div class="row-div chose_grade_type" style="width: 100%; height: 105px;">
                        <label style="color: rgba(0,0,0,.26); font-size: 16px">学员类型:</label>
                        <input name="student_type" class="student_type" type="radio" value="1" id="radio1" checked="checked"/><label for="radio1" class="for_radio">正式学员</label>
                        <input name="student_type" class="student_type" type="radio" value="2"  id="radio2"/><label for="radio2" class="for_radio">体验学员</label>
                    </div>
                </div>
            </div>
            <div class="mask_s"></div>

        </div>

        <!-- 聊天室页面 -->
        <div id="room-root" class="col-div">
            <!-- header -->
            <div class="row-div card" style="width: 100%; height: 60px; justify-content: space-between; background-color: #1D1D1D;">
                <div id="header-roomId" style="width: 230px;  font-size: 16px; color: #aaa; padding-left: 20px">房间号: 12345</div>
                <div id="grade_title" class="row-div" style="height: 100%; width: 300px;  font-size: 16px; color: #aaa;" >互动课堂</div>
                <!-- 分享屏幕 退出 按钮 -->
                <div class="row-div" style="height: 100%; width: auto;">
                    <img id="raise_hands" style="width: 45px; height: 45px; z-index: 50;" src="./img/up_hand.png" alt="" title="举手">
                    <img id="raise_hands_s" style="width: 420px; height: 220px; position: absolute; margin-top: 92px; z-index: 40; margin-left: -182px; display: none" src="./img/up_hand.gif" alt="" title="等待中">
                    <img id="screen-btn" style="width: 45px; height: 45px; z-index: 50;" src="./img/screen-off.png" alt="" title="屏幕分享">
                    <img id="logout-btn" style="width: 45px; height: 45px; z-index: 50;" src="./img/logout.png" alt="" title="退出">
                </div>
                <!-- 房间号 -->

            </div>
            <!-- content -->
            <div class="row-div" style="height: 100%; width: 100%; background: url('img/bg_2.jpg') no-repeat; background-size: cover;background-attachment: fixed;background-position: center center;  /*background-color: #020202;*/ ">

                <!-- 视频网格 -->
                <div id="video-grid" style="height: 100%; flex: 1;">
                    <!-- 主视频 -->
                    <div id="main-video" class="video-box col-div" style="justify-content: flex-end">
                        <!-- 主视频控制按钮 -->
                        <div id="main-video-btns" class="row-div"
                            style="width: 156px; position: absolute; z-index: 10; justify-content: center; align-self: flex-end">
                            <img id="video-btn" style="width: 68px; height: 68px" onClick="event.cancelBubble = true"
                                src="./img/big-camera-on.png" alt="" title="关闭摄像头">
                            <img id="mic-btn" style="width: 68px; height: 68px" onClick="event.cancelBubble = true"
                                src="./img/big-mic-on.png" alt="" title="关闭麦克风">
                        </div>
                        <div id="mask_main" class="mask col-div">
                            <!-- “摄像头未开启”遮罩 -->
                            <div style="height: 100%; width: 100%; position: absolute; background-color: #D8D8D8"></div>
                            <img style="width: 63px; height: 69px; z-index: 10;" src="./img/camera-max.png" alt="">
                            <div style="height: 10px"></div>
                            <div style="z-index: 10">摄像头未打开</div>
                        </div>
                    </div>
                    <!-- 小视频 -->
                </div>
            </div>
        </div>
    </div>
    <script src="./js/jquery-3.2.1.min.js"></script>
    <script src="./js/popper.js"></script>
    <script src="./js/bootstrap-material-design.js"></script>


    <script>



        $(document).ready(function () {
            $('body').bootstrapMaterialDesign();
        });

        $(document).on("click",".close_grade",function () {
            $(".grade_data").html("");
            $(".grade_info").hide();
            $(".mask_s").hide();
        });

        $(document).on("click",".mask_s",function () {
            $(".grade_data").html("");
            $(".grade_info").hide();
            $(".mask_s").hide();
        });

        $("#vcode").click(function(){
            if($("#vcode").attr("enabled") == "false"){
                return;
            }
            if($("#userId").val()=="" || $("#userId").val() == null){
                $("#userId").parents().addClass("error");
                $("#userId").next().text("用户手机号不能为空");
                return;
            }
            var url = $(this).attr("rel");
            var mobile = $("#userId").val();
            $.ajax({
                url: url,
                dataType:"json",
                data:{'number':mobile},
                success: function (data) {
                    var jsons = eval(data);
                    if(jsons.code == "200"){
                        localStorage.session_id = jsons.session_id;
                        var index = 60;
                        $("#vcode").attr("enabled","false");
                        var id = setInterval(function(){
                            $("#vcode").text("密码(" + (index--) + ")");
                            if(index < 0){
                                clearInterval(id) ;
                                $("#vcode").text("获取密码");
                                $("#vcode").attr("enabled","true");
                            }
                        }, 1000);	//1000为1秒钟
                    }else{
                        $(".username").parents().addClass("error");
                        $(".username").next().text(jsons.msg);
                        return;
                    }
                }//success
            });//$.ajax
        });

    </script>
    <script src="./js/lib-generate-test-usersig.min.js"></script>
    <script src="./js/debug/GenerateTestUserSig.js"></script>
    <script src="./js/trtc.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/rtc-client.js"></script>
    <script src="./js/share-client.js"></script>
    <script src="./js/presetting.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/sockjs.min.js"></script>
    <script src="./js/stomp.min.js"></script>


    <script>

        /**屏蔽鼠标右键*/
        /*document.oncontextmenu = function(){return false;};

        document.onmousedown = function(event) {
            event = window.event || event;

            if (document.all && event.button == 2) {

                event.returnvalue = false;

            }
        };
        document.onkeydown = function() {
            // 判断 Ctrl+S
            if(event.ctrlKey == true && event.keyCode == 83) {
                event.preventDefault();
            }
        };

        document.onkeydown=function (e){
            var currKey=0;
            var evt=e||window.event;
            currKey=evt.keyCode||evt.which||evt.charCode;
            if (currKey == 123){
                window.event.cancelBubble = true;
                window.event.returnValue = false;
            }
        }*/
    </script>

</body>

</html>